{% extends 'marketing/base.html' %}
{% load static %}
{% load common_tags %}
{% load paginate %}
{% block extralinks %} 
<style>
  .modebar {
    display: none
  }

  .text_ellipsis {
    width: 22em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .text_ellipsis_1 {

    width: 20em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
{% endblock %}
{% block content %}
{{ block.super }}
<div class="" style="">
  <div class="row marl">
    <div class="col-md-12">
      


      <div class="row marl justify-content-center">
        <div class="col-md-9">
          
          <div class="row count_blocks_row">
            <div class="col-md-3">
              <div class="item sky_blue">
                <a href="{% url 'marketing:email_template_list'%}">
                  <div class="title">Email Templates</div>
                  <div class="count">{{email_templates|length}}</div>
                  
                </a>
              </div>
            </div>
            <div class="col-md-3">
              <div class="item green">
                <a href="{% url 'marketing:contact_lists' %}">
                  <div class="title">Contacts List</div>
                  <div class="count">{{contacts_list|length}}</div>
                </a>
                
              </div>
            </div>
            <div class="col-md-3">
              <div class="item red">
                <a href="{% url 'marketing:contacts_list' %}">
                  <div class="title">Contacts</div>
                  <div class="count">{{contacts|length}}</div>
                  
                </a>
              </div>
            </div>
            <div class="col-md-3">
              <div class="item yellow">
                <a href="{% url 'marketing:campaign_list' %}">
                  <div class="title">Campaigns</div>
                  <div class="count">{{campaigns|length}}</div>
                  
                </a>
              </div>
            </div>
          </div>
          
          <div class="open_sections row">

            <div class="col-md-12">
              <div class="" id="graph">
                
              </div>
            </div>


            <div class="col-md-6 table_container_row">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">
                    <span>Contacts List</span>
                  </div>
                  <div class="table-responsive">
                    {% if contacts_list %}
                    <table class="table">
                      <thead>
                        <tr>
                          <th width="40%">Name</th>
                          
                          <th width="50%">Tags</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for contact in contacts_list|slice:"5" %}
                        <tr>
                          <td>
                            <div class="text_ellipsis">
                            <a href="{% url 'marketing:contact_list_detail' contact.id %}">{{contact.name}}</a>
                          </div>
                          </td>
                          
                          <td style="display: block;">
                            {% for tag in contact.tags.all|slice:'3' %}
                            <span class="text-left color{{forloop.counter}} tag_class_cl" id="list_tag"
                              data-link="{{tag.id}}" style="cursor: pointer;">{{tag.name}}</span>
                            {% empty %}
                            <span class="text-left">No Tags</span>
                            {% endfor %}
                            {% if contact.tags.all|length > 3 %}
                            <a href="{% url 'marketing:contact_list_detail' contact.id %}" style="color:white;"><span
                                class="text-left" id="list_tag">{{contact.tags.all|length|subtract:'3'}}<span>
                                  more
                                </span></a></span>
                            {% endif %}
                          </td>
                        </tr>
                        {% endfor %}
                      </tbody>
                    </table>
                    {% else %}
                    <p style="text-align:center">There are no records</p>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6 table_container_row">
              <div class="card">
                <div class="card-body">
                  <div class="card-title">
                    <span>Campaigns</span>
                  </div>
                  <div class="table-responsive">
                    {% if campaigns %}
                    <table class="table">
                      <thead>
                        <tr>
                          <th width="30%">Title</th>
                          <th width="30%">Tags</th>
                          <th width="50%">Contact List</th>
                        </tr>
                      </thead>
                      <tbody>
                        {% for campaign in campaigns|slice:"5" %}
                        <tr>
                          <td>
                            <div class="text_ellipsis_1">
                            <a href="{% url 'marketing:campaign_details' campaign.id %}">{{campaign.title}}</a>
                          </div>
                          </td>

                          <td style="display: block;">
                            {% for tag in campaign.tags.all|slice:'3' %}
                            <span class="text-left color{{forloop.counter}} tag_class_camp" id="list_tag"
                              data-link="{{tag.id}}" style="cursor: pointer;">{{tag.name}}</span>
                            {% empty %}
                            <span class="text-left">No Tags</span>
                            {% endfor %}
                            {% if campaign.tags.all|length > 3 %}
                            <a href="{% url 'marketing:campaign_details' campaign.id %}" style="color: white;"><span
                                class="text-left" id="list_tag">{{campaign.tags.all|length|subtract:'3'}}<span>
                                  more
                                </span></a></span>
                            {% endif %}
                          </td>
                          <td>
                            {% with contacts_lists=campaign.contact_lists.all %}
                            {% for contact in contacts_lists|slice:'3'  %}
                            <div>
                              <div>
                                <span class="text-left" id="list_opp_users_">
                                  <a
                                    href="{% url 'marketing:contact_list_detail' contact.id %}">{{contact.name}}</a><span>
                              </div>
                              {% empty %}
                              <span class="text-left">None</span>
                              {% endfor %}
                              {% if contacts_lists|length > 3 %}
                              <div>
                                <a href="{% url 'marketing:campaign_details' campaign.id %}" style="color:white;">
                                    <span class="text-left" id="list_tag">{{contacts_lists|length|subtract:'3'}}<span>
                                    more
                                  </span></span>
                                  </a>
                              </div>
                              {% endif %}
                              {% endwith %}
                              {% endfor %}
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    {% else %}
                    <p style="text-align:center">There are no records</p>
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

{% endblock %}
{% block js_block %}
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script type="text/javascript">

  $(document).ready(function () {
    $(".tag_class_cl").click(function () {
      // $(".tag_class_opp").css('cursor', 'pointer')
      url = "{% url 'marketing:contact_lists' %}"
      url = url + "?tag=" + $(this).attr('data-link')
      window.location.href = url;
    });

    $(".tag_class_camp").click(function (e) {
      e.preventDefault()
      // $(".tag_class_opp").css('cursor', 'pointer')
      url = "{% url 'marketing:campaign_list' %}"
      url = url + "?tag=" + $(this).attr('data-link')
      window.location.href = url;
    });

    {% if campaigns|length %}

    var trace1 = {
      // x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      // y: [20, 14, 25, 16, 18, 22, 19, 15, 12, 16, 14, 17],
      x:{{x_axis_titles|safe}},
      y:{{y_axis_unsubscribed}},
      type: 'bar',
      name: 'Unsubscribed',
      marker: {
        color: 'rgb(49,130,189)',
        opacity: 0.7
      }
    };

    var trace2 = {
      // x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      // y: [19, 14, 22, 14, 16, 19, 15, 14, 10, 12, 12, 16],
      x:{{x_axis_titles|safe}},
      y:{{y_axis_bounces}},
      type: 'bar',
      name: 'Bounces',
      marker: {
        color: '#e65c00',
        opacity: 0.5
      }
    };

    var trace3 = {
      // x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      // y: [19, 14, 22, 14, 16, 19, 15, 14, 10, 12, 12, 16],
      x:{{x_axis_titles|safe}},
      y:{{y_axis_subscribed}},
      type: 'bar',
      name: 'Subscribed',
      marker: {
        color: '#00cc00',
        opacity: 0.5
      }
    };

    var trace4 = {
      // x: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
      // y: [19, 14, 22, 14, 16, 19, 15, 14, 10, 12, 12, 16],
      x:{{x_axis_titles|safe}},
      y:{{y_axis_opened}},
      type: 'bar',
      name: 'Opened',
      marker: {
        color: '#00ffff',
        opacity: 0.5
      }
    };

    var data = [trace1, trace2, trace3, trace4];

    var layout = {
      title: 'Campaigns',
      margin: {
        b: 160,
        l: 120,
      },
      xaxis: {
        type: 'category',
        tickangle: -45,
      },
      barmode: 'group'
    };

    Plotly.newPlot('graph', data, layout);

    {% endif %}

  });

  // $('.modebar').css('display','none');

</script>
{% endblock js_block %}